<!--
@wyq  饼状图
<lar-chart-pie ></lar-chart-pie>
-->
<template>
    <div>
    <chart :options="polar" :theme="theme" auto-resize></chart>
    </div>
</template>

<style scoped>
    .echarts {
        width: auto !important;
        height: 420px !important;
        min-width: 340px;
    }
</style>

<script>
    //Echart https://github.com/ecomfe/vue-echarts/blob/master/README.zh_CN.md
    import Chart from 'vue-echarts/components/ECharts.vue'

    import 'echarts/theme/shine';
    // import 'echarts/theme/shine';

    // 手动引入 EC harts 各模块来减小打包体积
    import 'echarts/lib/chart/bar'
    import 'echarts/lib/component/polar'
    import 'echarts/lib/component/tooltip'

    import theme from './walden.json';

    Chart.registerTheme('walden', theme);
    // 注册组件后即可使用
    // Vue.component('chart', ECharts)

    export default {
        props: {
            waybillData:{
                type: Object,
                default: ()=>{
                    return {}
                }
            }
        },
        components: {Chart},
        data: function () {
            return {
                theme: 'walden',
                polar: {
                    tooltip : {
                        trigger: 'axis',
                        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    legend: {
                        data: ['已完成', '未完成'],
                        textStyle: {
                            "fontSize": 16
                        }
                    },
                    // grid: {
                    //     left: '3%',
                    //     right: '4%',
                    //     bottom: '3%',
                    //     containLabel: true
                    // },
                    xAxis:  {
                        type: 'value',
                        axisLabel:{
                            textStyle:{
                                color:"rgba(0,0,0,0.54)"
                            },
                            fontSize: 16
                        }
                    },
                    yAxis: {
                        type: 'category',
                        // data: ['北京','上海','深圳'],
                        data: [],
                        axisLabel:{
                            textStyle:{
                                color:"rgba(0,0,0,0.54)"
                            },
                            fontSize: 16
                        }
                    },
                    emphasis: {
                        label: {
                            fontSize: 20
                        }
                    },
                    series: [
                        {
                            name: '已完成',
                            type: 'bar',
                            stack: '总量',
                            barWidth : 20,
                            label: {
                                normal: {
                                    show: false,
                                    position: 'insideRight'
                                }
                            },
                            itemStyle: {
                                color:'#3905CD'
                            },
                            data: []
                        },
                        {
                            name: '未完成',
                            type: 'bar',
                            stack: '总量',
                            barWidth : 20,
                            label: {
                                normal: {
                                    show: false,
                                    position: 'insideRight'
                                }
                            },
                            itemStyle: {
                                color:'#7ED321'
                            },
                            data: []
                        }]
                }

        }
        },
        watch: {
            waybillData:function (val) {
                Object.keys(val).forEach((item,index) => {
                    this.polar.yAxis.data.push(val[item]['city']);
                    this.polar.series[0].data.push(val[item]['finish']);
                    this.polar.series[1].data.push(val[item]['not_finish']);
                });

            }
        },
        created() {
        },
        methods: {
        }
    }
</script>
<style>
</style>
